
<template>
  <div ref="huan" style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" :id="huanData.id" class="_wz_char">

  </div>
</template>
<script>
  export default {
    props: ["topHeight","huanData"],//接收来自父组件的数据
    data() {
      return {}
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      var data = that.huanData.data;

      var chart = new G2.Chart({
        container: that.huanData.id,
        forceFit: true,
        height: that.topHeight,
        animate: false,
        padding: [20, 10, 70, 20], // 每个 view 之间的间距
      });
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            return val +that.huanData.unit;
          }
        }
      });
      chart.coord('theta', {
        radius: 0.75,
        innerRadius: 0.6
      });
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      var interval = chart.intervalStack().position('percent').color('item').label('percent', {
        formatter: function formatter(val, item) {
          return item.point.item + ': ' + val;
        }
      }).tooltip('item*percent', function (item, percent) {
        percent = percent + that.huanData.unit;
        return {
          name: item,
          value: percent
        };
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      });
      chart.render();
    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
